<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Example</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        input[type="text"] {
            position: absolute;
            top: 300px;
            width: 300px;
            padding: 10px;
            font-size: 16px;
        }
        
        ul {
            list-style-type: none;
            padding: 0;
            position: absolute;
            width: 300px;
            /* 与输入框宽度相同 */
            background-color: #fff;
            /* 设置背景颜色 */
            border: 1px solid #ccc;
            /* 设置边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* 添加阴影效果 */
            bottom: calc(100% + 10px);
            /* 与输入框顶部对齐 */
            left: 0;
            /* 与输入框左对齐 */
            z-index: 1000;
            /* 确保在顶层显示 */
            display: none;
        }
        
        li {
            padding: 10px;
            cursor: pointer;
        }
        
        li:hover {
            background-color: #f4f4f4;
        }
    </style>
</head>

<body>
    <h1>Autocomplete Example</h1>
    <input type="text" id="searchInput" placeholder="Type here...">
    <ul id="searchResults"></ul>

    <script>
        const searchInput = document.getElementById('searchInput');
        const searchResults = document.getElementById('searchResults');

        // 模拟的数据集合，实际应用中可以是从服务器端获取的数据
        const data = ['Apple', 'Banana', 'Orange', 'Peach', 'Pear', 'Pineapple'];

        searchInput.addEventListener('input', function() {
            const searchText = this.value.toLowerCase();
            const matchedResults = data.filter(item => item.toLowerCase().includes(searchText));
            displayResults(matchedResults);
        });

        function displayResults(results) {
            searchResults.innerHTML = '';
            const inputRect = searchInput.getBoundingClientRect();
            searchResults.style.top = `${inputRect.top - searchResults.offsetHeight - 245}px`;

            results.forEach(result => {
                const li = document.createElement('li');
                li.textContent = result;
                li.addEventListener('click', function() {
                    searchInput.value = result;
                    searchResults.innerHTML = '';
                });
                searchResults.appendChild(li);
            });

            // 显示匹配框
            searchResults.style.display = 'block';
        }

        // 在文档上添加点击事件监听器以隐藏匹配框
        document.addEventListener('click', function(e) {
            // 检查匹配框是否可见
            if (searchResults.style.display !== 'none') {
                // 如果匹配框可见，则隐藏它
                searchResults.style.display = 'none';
            }
        });
    </script>
</body>

</html>